<template>
    <div class="demo-basic">
        <section>
            <h3>z-dropdown props</h3>
            <p style="margin-top: 20px">
                <z-dropdown @on-selected="echo">
                    <DropdownItem v-for="(item, index) in menu" :data="item" :key="index">
                        {{ item.name }}
                    </DropdownItem>
                </z-dropdown>
            </p>
        </section>
        <pre>
            <code>
            &lt;z-dropdown @on-selected="echo"&gt;
                &lt;DropdownItem v-for="(item, index) in menu" :data="item" :key="index"&gt;
                    ...
                &lt;/DropdownItem&gt;
            &lt;/z-dropdown&gt;

            data: function () {
                return {
                    menu: [
                        { name: '驴打滚', value: 0 },
                        { name: '炸酱面', value: 1 },
                        { name: '豆汁儿', value: 2 },
                        { name: '冰糖葫芦', value: 3 },
                        { name: '北京烤鸭', value: 4 }
                    ]
                }
            },
            methods: {
                echo: function (data) {
                    alert(JSON.stringify(data))
                }
            }
            </code>
        </pre>
        <Table :columns="propsColumn" :data="propsData"></Table>
    </div>
</template>

<script>
    import hljs from 'highlight.js'
    export default {
        data: function () {
            return {
                menu: [
                    { name: '驴打滚', value: 0 },
                    { name: '炸酱面', value: 1 },
                    { name: '豆汁儿', value: 2 },
                    { name: '冰糖葫芦', value: 3 },
                    { name: '北京烤鸭', value: 4 }
                ],
                propsColumn: [
                    { title: '方法名', key: 'methods' },
                    { title: '说明', key: 'introduct' },
                    { title: '参数', key: 'param' }
                ],
                propsData: [
                    {
                        methods: 'on-selected',
                        introduct: '点击下拉列表中的项或点击首选项触发回调函数',
                        param: '下拉项的赋值'
                    }
                ]
            }
        },
        methods: {
            echo: function (data) {
                alert(JSON.stringify(data))
            }
        },
        // 组件被挂载的时候执行的方法
        mounted: function () {
            window.setTimeout(function () {
                $('.demo-basic pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 0);
        }
    }
</script>
